import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AnimatedList Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const AnimatedListExample(title: 'AnimatedList 示例'),
    );
  }
}

class AnimatedListExample extends StatefulWidget {
  const AnimatedListExample({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<AnimatedListExample> createState() => _AnimatedListExampleState();
}

class _AnimatedListExampleState extends State<AnimatedListExample> {
  // 用于存储列表数据
  final List<String> _items = [];
  // AnimatedList的全局键，用于操作列表
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();

  // 插入新元素到列表
  void _insertItem() {
    final int index = _items.length;
    _items.add('Item ${index + 1}');
    _listKey.currentState?.insertItem(index);
  }

  // 从列表中移除元素
  void _removeItem(int index) {
    final String removedItem = _items[index];
    _items.removeAt(index);
    _listKey.currentState?.removeItem(
      index,
      (context, animation) => _buildItem(removedItem, animation),
    );
  }

  // 构建列表项，应用动画效果
  Widget _buildItem(String item, Animation<double> animation) {
    return FadeTransition(
      opacity: animation,
      child: SizeTransition(
        sizeFactor: animation,
        child: Card(
          margin: const EdgeInsets.all(10),
          elevation: 5,
          child: ListTile(
            title: Text(item),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () {
                _removeItem(_items.indexOf(item));
              },
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: AnimatedList(
        key: _listKey,
        initialItemCount: _items.length,
        itemBuilder: (context, index, animation) {
          return _buildItem(_items[index], animation);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _insertItem,
        tooltip: '添加项目',
        child: const Icon(Icons.add),
      ),
    );
  }
}

// 自定义过渡效果的AnimatedList示例
class CustomAnimatedListExample extends StatefulWidget {
  const CustomAnimatedListExample({Key? key}) : super(key: key);

  @override
  State<CustomAnimatedListExample> createState() =>
      _CustomAnimatedListExampleState();
}

class _CustomAnimatedListExampleState extends State<CustomAnimatedListExample> {
  final List<String> _items = [];
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();

  void _addItem() {
    final int index = _items.length;
    _items.add('Item ${index + 1}');
    _listKey.currentState?.insertItem(index);
  }

  void _removeItem(int index) {
    final String removedItem = _items[index];
    _items.removeAt(index);
    _listKey.currentState?.removeItem(
      index,
      (context, animation) => _buildItem(removedItem, animation),
    );
  }

  // 自定义过渡动画效果
  Widget _buildItem(String item, Animation<double> animation) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(-1, 0),
        end: Offset.zero,
      ).animate(animation),
      child: ScaleTransition(
        scale: animation,
        child: Card(
          margin: const EdgeInsets.all(8),
          child: ListTile(
            title: Text(item),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () {
                _removeItem(_items.indexOf(item));
              },
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自定义动画效果')),
      body: AnimatedList(
        key: _listKey,
        initialItemCount: _items.length,
        itemBuilder: (context, index, animation) {
          return _buildItem(_items[index], animation);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addItem,
        child: const Icon(Icons.add),
      ),
    );
  }
}

// 使用AnimatedList和ReorderableListView结合的示例
class ReorderableAnimatedListExample extends StatefulWidget {
  const ReorderableAnimatedListExample({Key? key}) : super(key: key);

  @override
  State<ReorderableAnimatedListExample> createState() =>
      _ReorderableAnimatedListExampleState();
}

class _ReorderableAnimatedListExampleState
    extends State<ReorderableAnimatedListExample> {
  final List<String> _items = List.generate(10, (index) => 'Item ${index + 1}');
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('可重排的AnimatedList')),
      body: ReorderableListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          final item = _items[index];
          return Card(
            key: ValueKey(item),
            margin: const EdgeInsets.all(8),
            child: ListTile(
              title: Text(item),
              trailing: const Icon(Icons.drag_handle),
            ),
          );
        },
        onReorder: (oldIndex, newIndex) {
          setState(() {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            }
            final String item = _items.removeAt(oldIndex);
            _items.insert(newIndex, item);
          });
        },
      ),
    );
  }
}

// 包含多种动画效果的复杂AnimatedList示例
class ComplexAnimatedListExample extends StatefulWidget {
  const ComplexAnimatedListExample({Key? key}) : super(key: key);

  @override
  State<ComplexAnimatedListExample> createState() =>
      _ComplexAnimatedListExampleState();
}

class _ComplexAnimatedListExampleState
    extends State<ComplexAnimatedListExample> {
  final List<ItemData> _items = [];
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();

  void _addItem() {
    final int index = _items.length;
    final newItem = ItemData(
      id: 'id_$index',
      title: 'Item ${index + 1}',
      color: Colors.primaries[index % Colors.primaries.length],
    );
    _items.add(newItem);
    _listKey.currentState?.insertItem(index);
  }

  void _removeItem(int index) {
    final ItemData removedItem = _items[index];
    _items.removeAt(index);
    _listKey.currentState?.removeItem(
      index,
      (context, animation) => _buildItem(removedItem, animation),
    );
  }

  Widget _buildItem(ItemData item, Animation<double> animation) {
    return FadeTransition(
      opacity: animation,
      child: SizeTransition(
        sizeFactor: animation,
        child: Card(
          margin: const EdgeInsets.all(8),
          color: item.color.withOpacity(0.8),
          child: ListTile(
            title: Text(
              item.title,
              style: const TextStyle(color: Colors.white),
            ),
            trailing: IconButton(
              icon: const Icon(Icons.delete, color: Colors.white),
              onPressed: () {
                _removeItem(_items.indexOf(item));
              },
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('复杂动画列表')),
      body: AnimatedList(
        key: _listKey,
        initialItemCount: _items.length,
        itemBuilder: (context, index, animation) {
          return _buildItem(_items[index], animation);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addItem,
        child: const Icon(Icons.add),
      ),
    );
  }
}

// 用于复杂示例的数据模型
class ItemData {
  final String id;
  final String title;
  final Color color;

  ItemData({required this.id, required this.title, required this.color});
}
